<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>在线订餐</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none
        }

        ul {
            list-style: none;
        }

        #head1111 {
            width: 100%;
            height: 80px;
        }

        #menu1111 ul li a {
            text-decoration: none;
            color: rgb(71, 47, 52);

        }

        #menu1111 ul {
            width: 500px;
            position: absolute;
            right: 80px;
        }

        #menu1111 ul li {
            float: left;
            width: 100px;
            height: 30px;
            line-height: 30px;
            margin: 20px auto;
        }

        #menu1111 ul li a:hover {
            color: rgb(248, 90, 117);
        }

        #logo1111 {
            position: absolute;
            top: 5px;
            left: 100px;
            width: 100px;
            height: 100px;
        }

        .ph1111 {
            width: 70px;
            height: 70px;
        }

        #body {
            width: 100%;
            height: 1300px;
            margin: 0 auto
        }

        #body #head2 {
            width: 100%;
            height: 500px;
        }

        #body #head2 img {
            width: 100%;
            height: 500px;
            display: block;
            margin: 0 auto
        }

        #body #body1 {
            text-align: center
        }

        #body #pagesList {
            width: 30%;
            height: 30px;
            margin: 0 auto;
            margin-top: 50px;
        }

        #body #pagesList li {
            width: 30%;
            height: 28px;
            line-height: 30px;
            text-align: center;
            float: left;
            border-radius: 10px;
            margin-left: 10px;
            background: #ccc;
            cursor: pointer;
        }

        #body #pagesList #li1 {
            background: pink
        }

        #body2 ul {
            width: 80%;
            height: 700px;
            margin: 0 auto;
        }

        #body2 ul li {
            width: 21%;
            height: 280px;
            float: left;
            padding: 10px;
            margin: 8px;
            line-height: 280px;
            text-align: center;
        }

        #body2 ul li img {
            width: 100%;
            height: 223px;
            margin-top: 50px;
        }

        #body2 ul .span1 {
            width: 120px;
            height: 20px;
            color: #f00;
            float: left;
            position: relative;
            top: -230px;
            left: -40px;
        }

        #body2 ul li span {
            height: 50px;
            width: 145px;
            color: #666;
            float: right;
            position: relative;
            top: -250px;
            right: 40px;
        }

        #body2 ul li .img1 {
            width: 30px;
            height: 30px;
            position: relative;
            top: -242px;
            left: 170px;
        }

        #body #body2-2 {
            display: none
        }

        #body #body2-3 {
            display: none
        }

        footer {
            width: 100%;
            height: 150px;
            background: #eee;
            margin-top: 80px;
        }

        footer ul {
            width: 600px;
            height: 50px;
            margin: 0 auto;
        }

        footer ul li {
            width: 120px;
            height: 50px;
            line-height: 50px;
            float: left;
            text-align: center
        }

        #footer1 #img2 {
            margin-left: 50px;
            margin-top: 10px;
            width: 30px;
            height: 30px;
            position: relative;
            bottom: 15px;
            text-align: center
        }

        #footer1 #span2 {
            position: relative;
            top: -25px;
            margin-right: 50px;
        }

        #footer1 p {
            width: 100%;
            height: 30px;
            text-align: center
        }

        #footer1 {
            margin-top: 20px;
            width: 500px;
            height: 30px;
            margin: 0 auto;
        }

        footer p {
            margin-top: 20px;
            text-align: center;
        }
    </style>
     <script src="js/jquery-3.4.1.min.js"></script>
     <script>
         $(function () {
             $('#li1').mouseover(function () {
                 $('#body2-1').css('display', 'block')
                 $('#body2-2').css('display', 'none')
                 $('#body2-3').css('display', 'none')
                 $("#li1").css("background", "pink")
                 $("#li2").css("background", "#ccc")
                 $("#li3").css("background", "#ccc")
             })
             $('#li2').mouseover(function () {
                 $('#body2-1').css('display', 'none')
                 $('#body2-2').css('display', 'block')
                 $("#li2").css("background", "pink")
                 $("#li1").css("background", "#ccc")
                 $("#li3").css("background", "#ccc")
                 $('#body2-3').css('display', 'none')
             })
             $('#li3').mouseover(function () {
                 $('#body2-1').css('display', 'none')
                 $('#body2-2').css('display', 'none')
                 $('#body2-3').css('display', 'block')
                 $("#li3").css("background", "pink")
                 $("#li2").css("background", "#ccc")
                 $("#li1").css("background", "#ccc")
             })
         })
     </script>
 </head>
 
 <body>
     <div id="head1111">
         <div id="menu1111">
             <ul>
                 <li><a href="index.html" id="index">首页</a></li>
                 <li><a href="menu.html" title="">在线订餐</a></li>
                 <li><a href="discount.html" title="">优惠活动</a></li>
                 <li><a href="News.html" title="">新闻资讯</a></li>
                 <li><a href="Contact us.html" title="">联系我们</a></li>
             </ul>
         </div>
         <div id="logo1111">
             <img src="images/logo1.png" alt="" class="ph1111">
         </div>
     </div>
     <div id="body">
         <div id="head2"><img src="images/head2.jpg" alt=""></div>
         <div id="body1">
             <h1 style="color: #666">特色菜单</h1>
         </div>
         <ul id="pagesList">
             <li id="li1">雪糕</li>
             <li id="li2">饮品</li>
             <li id="li3">甜甜圈</li>
         </ul>
         <div id="body2">
                <div id="float">
                    <a href="Shopping cart.html"></a>
                </div>
                <ul id="body2-1">
                    <li><img src="images/food/food1.jpg" alt=""><span class="span1">￥25</span><span> 奇异果冰棍</span><img class="img1" src="images/shopping.png" alt=""></li>
                    <li><img src="images/food/food2.jpg" alt=""><span class="span1">￥25</span><span> 草莓冰沙</span><img class="img1" src="images/shopping.png" alt=""></li>
                    <li><img src="images/food/food3.jpg" alt=""><span class="span1">￥25</span><span> 啤酒雪糕</span>
                        <img class="img1" src="images/shopping.png" alt=""></li>
                    <li><img src="images/food/food4.jpg" alt=""><span class="span1">￥26</span><span> 榴莲雪糕</span>
                        <img class="img1" src="images/shopping.png" alt=""></li>
                    <li><img src="images/food/food5.jpg" alt=""><span class="span1">￥26</span><span> 奶盖雪糕</span>
                        <img  class="img1" src="images/shopping.png" alt=""></li>
                    <li><img src="images/food/food6.jpg" alt=""><span class="span1">￥28</span><span> 樱桃雪糕</span>
                        <img class="img1" src="images/shopping.png" alt=""></li>
                    <li><img src="images/food/food7.jpg" alt=""><span class="span1">￥29</span><span> 多味雪糕</span>
                        <img  class="img1" src="images/shopping.png" alt=""></li>
                    <li><img src="images/food/food8.jpg" alt=""><span class="span1">￥28</span><span> 草莓雪糕</span>
                        <img  class="img1" src="images/shopping.png" alt=""></li>
                    </span>
                </ul>
                <ul id="body2-2">
                    <li><img src="images/drink/drink1.jpg" alt=""><span class="span1">￥30</span><span>柠檬果汁</span>
                        <img  class="img1" src="images/shopping.png" alt=""></li>
                    <li><img src="images/drink/drink2.jpg" alt=""><span class="span1">￥30</span><span>草莓奶果汁</span><img
                            class="img1" src="images/shopping.png" alt=""></li>
                    <li><img src="images/drink/drink3.jpg" alt=""><span class="span1">￥35</span><span>橙汁</span><img
                            class="img1" src="images/shopping.png" alt=""></li>
                    <li><img src="images/drink/drink4.jpg" alt=""><span class="span1">￥32</span><span>西柚果汁</span><img
                            class="img1" src="images/shopping.png" alt=""></li>
                    <li><img src="images/drink/drink5.jpg" alt=""><span class="span1">￥33</span><span>草莓冰冷饮</span><img
                            class="img1" src="images/shopping.png" alt=""></li>
                    <li><img src="images/drink/drink7.jpg" alt=""><span class="span1">￥33</span><span>柠檬西瓜果汁</span><img
                            class="img1" src="images/shopping.png" alt=""></li>
                    <li><img src="images/drink/drink6.jpg" alt=""><span class="span1">￥35</span><span>草莓果汁</span><img
                            class="img1" src="images/shopping.png" alt=""></li>
                    <li><img src="images/drink/drink8.jpg" alt=""><span class="span1">￥32</span><span>三色果汁</span><img
                            class="img1" src="images/shopping.png" alt=""></li>
                </ul>
                <ul id="body2-3">
                        <li><img src="images/dessert/dessert1.jpg" alt=""><span class="span1">￥26</span><span>蓝莓甜甜圈</span><img
                                class="img1" src="images/shopping.png" alt=""></li>
                        <li><img src="images/dessert/dessert2.jpg" alt=""><span class="span1">￥27</span><span>奶黄甜甜圈</span><img
                                class="img1" src="images/shopping.png" alt=""></li>
                        <li><img src="images/dessert/dessert3.jpg" alt=""><span class="span1">￥27</span><span>樱花甜甜圈</span><img
                                class="img1" src="images/shopping.png" alt=""></li>
                        <li><img src="images/dessert/dessert4.jpg" alt=""><span class="span1">￥27</span><span>抹茶甜甜圈</span><img
                                class="img1" src="images/shopping.png" alt=""></li>
                        <li><img src="images/dessert/dessert5.jpg" alt=""><span class="span1">￥28</span><span>彩虹甜甜圈</span><img
                                class="img1" src="images/shopping.png" alt=""></li>
                        <li><img src="images/dessert/dessert6.jpg" alt=""><span class="span1">￥26</span><span>少女甜甜圈</span><img
                                class="img1" src="images/shopping.png" alt=""></li>
                        <li><img src="images/dessert/dessert7.jpg" alt=""><span class="span1">￥29</span><span>巧克力甜甜圈</span><img
                                class="img1" src="images/shopping.png" alt=""></li>
                        <li><img src="images/dessert/dessert8.jpg" alt=""><span class="span1">￥26</span><span>卡通甜甜圈</span><img
                                class="img1" src="images/shopping.png" alt=""></li>
                    </ul>
                </div>
            </div>
            <footer>
                <ul>
                    <li><a href="">首页</a></li>
                    <li><a href="">优惠活动</a></li>
                    <li><a href="">在线订餐</a></li>
                    <li><a href="">新闻资讯</a></li>
                    <li><a href="">关于我们</a></li>
                </ul>
                <div id="footer1">
                    <p><img id="img2" src="images/Iphone.png" alt=""><span id="span2">150xxxxxx2014</span></p>
                </div>
                <p>互联网出版许可证编号新出网证（沪）字 7777777号</p>
        
            </footer>
        </body>
        
        <ml>